<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive,PropType, Prop } from 'vue';
import { useRouter } from 'vue-router';
import Step from './step';
import API from '@/services';
import { EDicType, EIndicatorStatus } from '@/utils/constants';
import * as RouteNames from '@/router/consts';
const router = useRouter();
const props = defineProps({
    tabsItem: {
        type: Object as PropType<any>
    },
    myApproval: {
        type: String || undefined
    }
})
const tabDetail :any = ref({})
const handleMetricsDetail = (metricsId:any) => {
    router.push({
        name: RouteNames.ROUTE_INDEXDETAIL,
        query: { id: metricsId }
    });
}
const handleCreateMetrics = (id:any) => {
    router.push({
        path: '/manage/indexlib/create',
        query: {source: id}
    });
}


const getSelectData = (str:string, data:any,key:any,value:any) => {
    const arr = str?.split(',');
    const mapArr = data?.filter((item:any) => arr.includes(String(item[value])))
    const res = mapArr?.map((s:any) => {
        return s[key]
    })
    return res?.length && res.join()
}
const showSelectText = reactive<any>({
    timePeriodValue: '',
    levelMericsValue: '',
    supportDimensionValue: '',
})
/* 统计粒度 */
const getTimePeriodList = (cnName?: string) => {
  return new Promise(async (resolve) => {
    try {
    const { code, data } = await API.timePeriod.getTimePeriodNameHint({
        cnName
    });
    if (code === 200 && Array.isArray(data)) {
        resolve(data)
    } else {
      resolve([])
    }
    } catch (error) {
      resolve([])
    }
  })
};
/* 指标等级 */
const getGradeList = () => {
  return new Promise(async (resolve) => {
    try {
    const { code, data } =
        await API.dictionaryConfig.getDictionaryConfigEnumTypeByEnumType({
        enumType: EDicType.grade
        });
    if (code === 200 && Array.isArray(data)) {
        resolve(data)
    } else {
      resolve([])
    }
    } catch (error) {
      resolve([])
    }
  })
};

/* 获取支持维度下拉列表 */
const getDimensionList = (cnName?: string) => {
  return new Promise(async (resolve) => {
    try {
    const { code, data } = await API.dimension.getDimensionHintName({
        cnName
    });
    if (code === 200 && Array.isArray(data)) {
        resolve(data)
    } else {
      resolve([])
    }
    } catch (error) {
      resolve([])
    }
  })
};
watch(
    () => props.tabsItem,
    async (val) => {
        if (val) {
            await Promise.allSettled([getTimePeriodList(), getGradeList(), getDimensionList()])
                .then((data:any) => {
                    showSelectText.timePeriodValue = getSelectData(val.timePeriod, data[0].value,'cnName', 'id')
                    showSelectText.levelMericsValue = val?.metricsLevel && data[1].value.find((item:any)=> item.value == val.metricsLevel)['label']
                    showSelectText.supportDimensionValue = getSelectData(val.supportDimension, data[2].value,'cnName', 'id')
                })
            Object.keys(val).forEach(item => {
                tabDetail.value[item] = val[item] || '--'
            })
        }
    },
    {
        immediate: true
    }
)

</script>
<template>
    <div class="tabs-wraapers">
        <a-form-item show-colon label="指标名称">
            <div class="dis-flex space-between align-item" :style="{width: '100%'}">
                <span>{{tabDetail.metricsName}}</span>
                <div v-if="props?.myApproval != 'myApproval' && tabDetail?.metricsStatus != '-2' && tabDetail?.metricsStatus != '-1'">
                    <a-button 
                        type="outline" 
                        v-show="tabDetail.metricsStatus === '0'"
                        @click="handleCreateMetrics(tabDetail.id)"
                    >
                        创建指标
                    </a-button>
                    <a-button 
                        type="outline" 
                        v-show="!['-2', '-1', '0'].includes(
                                  tabDetail.metricsStatus
                                )"
                        @click="handleMetricsDetail(tabDetail.metricsId)"
                    >
                            指标详情
                    </a-button>
                </div>
                
            </div>
        </a-form-item>
        <a-form-item show-colon label="业务含义">
            <span>{{tabDetail.description}}</span>
        </a-form-item>

        <a-form-item show-colon label="可用维度">
            <span>{{showSelectText.supportDimensionValue}}</span>
        </a-form-item>

        <a-form-item show-colon label="统计粒度">
            <span>{{showSelectText.timePeriodValue}}</span>
        </a-form-item>

        <a-form-item show-colon label="指标等级">
            <span v-if="showSelectText.levelMericsValue">{{showSelectText.levelMericsValue}}</span>
            <span v-else>--</span>
        </a-form-item>


        <a-form-item show-colon label="备注">
            <span v-if="tabDetail.remarks">{{tabDetail.remarks}}</span>
            <span v-else>--</span>
        </a-form-item>
    </div>
    <div class="approval-precess">
        <div class="fw metricsStep">指标审批进度</div>
        <Step :approvalDetailList="tabDetail.approvalDetailList" />
    </div>

</template>
<style>
.approval-drawer-wrapper .arco-drawer-body{
    padding-top: 14px;
  }
  .approval-drawer-wrapper .arco-form-item {
    margin-bottom: 4px;
  }
</style>
<style lang="scss" scoped>
.metricsStep {
    margin-top: 20px;
}
.approval-precess {
    padding-left: 18px;
    padding-right: 18px;
    overflow: hidden;
}

.tabs-wraapers {
    padding: 18px 18px 0;
    :deep(.arco-form-item-content-wrapper) {
        width: 100%;
        .arco-form-item-content {
            width: 100%;
        }
    }
    :deep(.arco-form-item) {
        margin-bottom: 4px;
        align-items: baseline;
    }
}
</style>